<template>
  <div class="graduation">
    <el-card class="card">
      <!-- 主页面 -->
      <div v-show="listshow">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>毕业要求管理</el-breadcrumb-item>
        </el-breadcrumb>
         <!-- 搜索框 -->
        <div class="user-search">
          <el-input
          clearable
          placeholder="请输入毕业要求版本号"
          v-model="query"
          class="input-with-select"
          @clear="getCourseclear()"
          @input="getgradulist()"
          >
          </el-input>
          <el-button type="success" class="user-btn" @click="addbtn()">添加毕业要求</el-button>
        </div>
        <!-- 列表信息 -->
        <div class="text">
          <el-table
            :data="list"
            style="width: 100%"
            height="470"
            v-loading="loading"
            >
            <el-table-column
              type="index"
              width="40"
              >
            </el-table-column>
            <el-table-column
              label="毕业要求"
              prop="content"
              width="700"
              >
            </el-table-column>
            <el-table-column
              label="版本号"
              prop="version"
              width="100"
              >
            </el-table-column>
            <el-table-column
            prop="editor"
            label="编辑"
            >
              <template slot-scope="scope">
                <el-button
                size="mini"
                plain
                type="primary"
                icon="el-icon-edit"
                circle
                @click="editor(scope.row)"
                >
                </el-button>
                <el-button
                size="mini"
                plain type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteOpen(scope.row)"
                >
                </el-button>
                <el-button
                size="mini"
                plain
                type="info"
                icon="el-icon-menu"
                circle
                @click="watch(scope.row)"
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 指标点页面 -->
      <div v-show="quotasshow">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>毕业要求管理</el-breadcrumb-item>
          <el-breadcrumb-item>毕业要求指标点</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索框 -->
        <div class="user-search">
          <el-input
          disabled
          v-model="this.labelName"
          class="input-with-select"
          >
          </el-input>
          <el-button type="success" class="user-btn" @click="addquotas()">添加指标点</el-button>
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>
        <div class="text">
          <el-table
            :data="InnerData"
            stripe
            style="width: 100%"
            height="550"
            >
            <el-table-column
              prop="number"
              label="指标点序号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="content"
              label="指标点内容"
              width="750"
            >
            </el-table-column>
            <el-table-column
              prop="editor"
              label="编辑"
            >
              <template slot-scope="scope">
                <el-button
                size="mini"
                plain
                type="primary"
                icon="el-icon-edit"
                circle
                @click="editorquotas(scope.row)"
                >
                </el-button>
                <el-button
                size="mini"
                plain type="danger"
                icon="el-icon-delete"
                circle
                @click="deletequotas(scope.row)"
                >
                </el-button>
                 <!-- <el-button
                size="mini"
                plain
                type="primary"
                round
                @click="contextaim(scope.row)"
                >
                关联课程目标
                </el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 添加毕业要求组件 -->
      <el-dialog title="添加毕业要求" :visible.sync="dialogFormVisibleAdd" style="min-width: 1540px" @opened="ToFocus(1)">
        <el-form :model="form" style="margin-right:130px">
          <el-form-item label="毕业要求" :label-width="formLabelWidth">
            <el-input v-model="form.content" autocomplete="off" ref="one" @keyup.native="jump($event,2)"></el-input>
          </el-form-item>
          <el-form-item label="版本号" :label-width="formLabelWidth">
            <el-input v-model="form.version" autocomplete="off" @keyup.native.enter="addform()" @keyup.native="jump($event,3)"></el-input>
          </el-form-item>
          <div style="text-align:right;padding-right:10px">
            <el-link icon="el-icon-edit" :underline=false @click="addnews()" title="重复点击，一次可添加多个指标点">新增指标点</el-link>
          </div>
        </el-form>
        <div style="height:164px;margin-left:30px">
          <el-form v-model="quotasdata" style="height:164px;overflow:auto" v-if="addNewsdetails">
            <!-- <div style="padding-left:20px">指标点</div> -->
            <div v-for="(item, index) in quotasdata" :key="index">
              <div style="padding:10px 0 5px 20px">
                <el-input v-model="item.number" placeholder="序号" style="width:65px;display:inline-block"></el-input>
                <el-input v-model="item.content" placeholder="请输入指标点内容" style="width:480px;display:inline-block" @keyup.native.enter="addform()"></el-input>
                <el-link :underline=false @click="deleteNew(index)">关闭</el-link>
              </div>
            </div>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
          <el-button type="primary" @click="addform()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑毕业要求组件 -->
      <el-dialog title="编辑毕业要求" :visible.sync="dialogFormVisibleEdit" style="min-width: 1540px" @opened="ToFocus(2)">
        <el-form :model="Editform" style="margin-right:130px">
          <el-form-item label="毕业要求" :label-width="formLabelWidth">
            <el-input v-model="Editform.content" autocomplete="off" ref="two"  @keyup.native="jump($event,2)"></el-input>
          </el-form-item>
          <el-form-item label="版本号" :label-width="formLabelWidth">
            <el-input v-model="Editform.version" autocomplete="off" @keyup.native.enter="editorform()"  @keyup.native="jump($event,3)"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
          <el-button type="primary" @click="editorform()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加指标点组件 -->
      <el-dialog title="添加指标点" :visible.sync="addquoatsbox" style="min-width: 1540px">
        <el-form :model="form" style="margin-right:130px">
          <el-form-item label="毕业要求" :label-width="formLabelWidth">
            <el-input v-model="labelName" autocomplete="off" disabled></el-input>
          </el-form-item>
          <div style="text-align:right;padding-right:10px">
            <el-link icon="el-icon-edit" :underline=false @click="addnews()" title="重复点击，一次可添加多个指标点">新增指标点</el-link>
          </div>
        </el-form>
        <div style="height:164px;margin-left:30px">
          <el-form v-model="quotasdata" style="height:164px;overflow:auto" v-if="addNewsdetails">
            <!-- <div style="padding-left:20px">指标点</div> -->
            <div v-for="(item, index) in quotasdata" :key="index">
              <div style="padding:10px 0 5px 20px">
                <el-input v-model="item.number" placeholder="序号" style="width:65px;display:inline-block"></el-input>
                <el-input v-model="item.content" placeholder="请输入指标点内容" style="width:480px;display:inline-block"  @keyup.native.enter="addform2"></el-input>
                <el-link :underline=false @click="deleteNew(index)">关闭</el-link>
              </div>
            </div>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addquoatsbox = false">取 消</el-button>
          <el-button type="primary" @click="addform2()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑指标点 -->
       <el-dialog title="编辑指标点" :visible.sync="Editquotasbox" style="min-width: 1540px" @opened="ToFocus(3)">
        <el-form :model="Editform2" style="margin-right:130px">
          <el-form-item label="序号" :label-width="formLabelWidth">
            <el-input v-model="Editform2.number" autocomplete="off" ref="three"  @keyup.native="jump($event,4)"></el-input>
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input v-model="Editform2.content" autocomplete="off" @keyup.native.enter="editorform2()"  @keyup.native="jump($event,5)"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Editquotasbox = false">取 消</el-button>
          <el-button type="primary" @click="editorform2()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 课程目标管理 -->
      <el-drawer
      title="关联课程目标"
      :visible.sync="aimdialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      style="overflow:auto"
      >
      <el-tabs v-model="activeName" class="changetabs">
        <el-tab-pane label="新增关联目标" name="first">
           <div class="demo-drawer__content">
            <el-form >
              <el-form-item label="指标点" :label-width="formLabelWidth">
                <el-input
                v-model="qnum"
                autocomplete="off"
                disabled
                style="width:200px"
                >
                </el-input>
              </el-form-item>
              <div class="testcolor">*关联的所有课程目标的支撑度相加应为1</div>
            </el-form>
            <template style="height:500px;overflow:auto">
              <el-table :data="aimdata" height='200'>
                <el-table-column type="index" label="" width="55"></el-table-column>
                <el-table-column property="name" label="目标" width="180"></el-table-column>
                <el-table-column property="support" label="支撑度" width="110"></el-table-column>
                <el-table-column property="content" label="编辑">
                  <template slot-scope="scope">
                    <el-link icon="el-icon-delete" type="danger" :underline=false @click="delelteAim(scope.row)"></el-link>
                  </template>
                </el-table-column>
              </el-table>
              <div class="addaim">
                <el-link icon="el-icon-edit" :underline=false @click="addaims()" title="重复点击，一次可关联多个课程目标">新增</el-link>
              </div>
              <el-form v-model="aimform"  v-show="add" class="add-hidden">
                <div v-for="(item, index) in aimform" :key="index" class="little">
                  <el-select v-model="item.aid" placeholder="请选择课程目标" style="margin-left:40px;width:200px;display:inline-block">
                    <el-option v-for="mes of aimlist" :key="mes.$index" :label="mes.name" :value="mes.aid" ></el-option>
                  </el-select>
                  <el-input v-model="item.support" placeholder="请输入支撑度" style="width:130px;display:inline-block"></el-input>
                  <el-link :underline=false @click="closeaddaims(index)">&nbsp;&nbsp;&nbsp;&nbsp;关闭</el-link>
                </div>
              </el-form>
            </template>
          </div>
          <div class="demo-drawer__footer">
              <el-button @click="dialog = false">取 消</el-button>
              <el-button type="success" @click="aimsave()">保存</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="修改关联目标" name="second">
          <div class="demo-drawer__content">
            <el-form >
              <el-form-item label="指标点" :label-width="formLabelWidth">
                <el-input
                v-model="qnum"
                autocomplete="off"
                disabled
                style="width:200px"
                >
                </el-input>
              </el-form-item>
              <div class="testcolor">*关联的所有课程目标的支撑度相加应为1</div>
            </el-form>
            <template>
              <template class="detailbox">
                <el-table :data="editdata" height="380">
                  <el-table-column type="index" label="" width="55"></el-table-column>
                  <el-table-column prop="age" label="关联目标">
                    <template  slot-scope="scope">
                      <el-select  v-model="editdata[scope.$index].name" placeholder="请选择关联目标"  style="width:160px" @change="changeLocationValue($event , scope.$index)">
                        <el-option v-for="aim of aimlist" :key="aim.$index" :label="aim.name" :value="aim.aid"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column prop="age" label="支撑度">
                    <template  slot-scope="scope">
                      <el-input v-model="editdata[scope.$index].support"></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </template>
          </div>
          <div class="demo-drawer__footer">
              <el-button @click="editdialog = false">取 消</el-button>
              <el-button type="primary" @click="updatedinfo()">确定</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'graduation',
  data () {
    return {
      loading: false,
      listshow: true,
      quotasshow: false,
      aimdialog: false,
      activeName: 'first',
      labelName: '',
      query: '',
      list: [],
      List2: [],
      quotaslist: [],
      quotasdata: [],
      editdata: [],
      expands: [],
      InnerData: [],
      aimdata: [],
      inputs: [],
      aimform: [
        {
          qid: '',
          aid: '',
          support: ''
        }
      ],
      aimlist: [],
      qid: '',
      qnum: '',
      add: false,
      requireId: '',
      pageNum: 1,
      pageSize: 8,
      totalCount: -1,
      dialogFormVisibleAdd: false,
      dialogFormVisibleEdit: false,
      form: {},
      Editform: {},
      formLabelWidth: '120px',
      addNewsdetails: false,
      addquoatsbox: false,
      Editquotasbox: false,
      version: '',
      Editform2: {}
    }
  },
  components: {},
  mounted () {
    this.loading = true
  },
  created () {
    this.getgradulist()
    this.getaimlist()
  },
  watch: {
    aimdialog: function () {
      this.add = false
      this.aimform = []
      this.activeName = 'first'
    }
  },
  methods: {
    // 获取所有毕业要求
    async getgradulist () {
      const AUTH_TOKEN = sessionStorage.getItem('token')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      // 后台token的key是token
      this.$http.defaults.headers.get['Content-Type'] = 'application/json'
      this.$http.defaults.headers.get['Accept'] = 'application/json'
      const res = await this.$http.get(`require/list?pageNum=1&pageSize=9999&version=${this.query}`)
      // console.log(res)
      const {code, msg, page} = res.data
      if (code === 200) {
        this.totalCount = page.totalCount
        this.list = page.list
        this.loading = false
      } else {
        this.loading = false
        this.$message.error(msg)
      }
    },
    // 清空搜索框
    getCourseclear () {
      this.getgradulist()
    },
    // 添加毕业要求按钮
    addbtn () {
      this.quotasdata = []
      this.form = {}
      this.dialogFormVisibleAdd = true
    },
    async addform () {
      const form = [
        {
          quotas: this.quotasdata,
          require: this.form
        }
      ]
      // console.log(form)
      const res = await this.$http.post('require/save', form)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('添加成功！')
        this.dialogFormVisibleAdd = false
        this.getgradulist()
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 编辑毕业要求按钮
    editor (info) {
      this.requireId = info.requireId
      this.Editform = {
        content: info.content,
        version: info.version
      }
      this.dialogFormVisibleEdit = true
    },
    async editorform () {
      const form = {
        content: this.Editform.content,
        requireId: this.requireId,
        version: this.Editform.version
      }
      const res = await this.$http.put('require/update', form)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('修改成功！')
        this.dialogFormVisibleEdit = false
        this.getgradulist()
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 删除毕业要求按钮
    deleteOpen (info) {
      const id = info.requireId
      this.$confirm('此操作将永久删除该毕业要求, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$http.delete('require/delete', {data: [id]})
        // console.log(res)
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getgradulist()
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 添加指标点按钮
    addquotas () {
      this.quotasdata = []
      this.form = {}
      this.addquoatsbox = true
    },
    async addform2 () {
      const form = [
        {
          quotas: this.quotasdata,
          require: {
            content: this.labelName,
            version: this.version,
            requireId: this.requireId
          }
        }
      ]
      // console.log(form)
      const res = await this.$http.post('require/save', form)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('添加成功！')
        this.addquoatsbox = false
        this.$http.get(`require/info/${this.requireId}`).then((res) => {
          const {code, msg, info: {quotas}} = res.data
          if (code === 200) {
            this.InnerData = quotas
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 删除指标点
    deletequotas (info) {
      // console.log(info)
      const id = info.qid
      this.$confirm('此操作将永久删除该毕业指标点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$http.delete('quota/delete', {data: [id]})
        // console.log(res)
        const {msg, code} = res.data
        if (code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`require/info/${this.requireId}`).then((res) => {
            const {code, msg, info: {quotas}} = res.data
            if (code === 200) {
              this.InnerData = quotas
            } else {
              console.log(msg)
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 编辑指标点
    editorquotas (info) {
      this.Editquotasbox = true
      this.Editform2 = {
        qid: info.qid,
        number: info.number,
        content: info.content
      }
      // console.log(this.Editform2)
    },
    async editorform2 () {
      const res = await this.$http.put('quota/update', this.Editform2)
      // console.log(res)
      if (res.data.code === 200) {
        this.$message.success('修改成功！')
        this.Editquotasbox = false
        this.$http.get(`require/info/${this.requireId}`).then((res) => {
          const {code, msg, info: {quotas}} = res.data
          if (code === 200) {
            this.InnerData = quotas
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 指标点关联课程目标
    async contextaim (info) {
      // console.log(info)
      this.qnum = info.number
      this.aimdialog = true
      this.qid = info.qid
      const res = await this.$http.get(`aim_quota/info/${this.qid}`)
      // console.log(res)
      const {code, msg, aimQuota} = res.data
      if (code === 200) {
        this.aimdata = aimQuota
        this.editdata = aimQuota
      } else {
        this.$message.error(msg)
      }
    },
    // 保存课程目标
    async aimsave () {
      const info = {
        aims: this.aimform,
        quota: {
          qid: this.qid
        }
      }
      console.log(info)
      const res = await this.$http.post('aim_quota/save', info)
      const {code, msg} = res.data
      console.log('res', res)
      if (code === 200) {
        this.$message.success('关联成功！')
        this.add = false
        this.aimform = []
        this.$http.get(`aim_quota/info/${this.qid}`).then((back) => {
          const {aimQuota} = back.data
          if (back.data.code === 200) {
            this.aimdata = aimQuota
            this.editdata = aimQuota
            console.log('back', back)
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(msg)
      }
    },
    // 获取aimNAME
    changeLocationValue (val, i) {
      // console.log(val, i)
      let obj = {}
      obj = this.aimlist.find(function (item) {
        return item.aid === val
      })
      // obj 就是被选中的那个对象，也就能拿到label值了。
      this.editdata[i].name = obj.name
      // console.log(obj.name)
    },
    // 编辑目标关联
    async updatedinfo () {
      const form = []
      for (var i = 0; i < this.editdata.length; i++) {
        form.push({
          aid: this.editdata[i].aid,
          name: this.editdata[i].name,
          support: this.editdata[i].support
        })
      }
      const info = {
        aims: form,
        quota: {
          qid: this.qid
        }
      }
      // console.log(info)
      const res = await this.$http.put('aim_quota/update', info)
      const {code, msg} = res.data
      // console.log('res', res)
      if (code === 200) {
        this.$message.success('修改成功！')
        this.add = false
        this.aimform = []
        this.$http.get(`aim_quota/info/${this.qid}`).then((back) => {
          const {aimQuota} = back.data
          if (back.data.code === 200) {
            this.aimdata = aimQuota
            this.editdata = aimQuota
            // console.log('back', back)
          } else {
            console.log(msg)
          }
        })
      } else {
        this.$message.error(msg)
      }
    },
    // 删除课程目标
    delelteAim (info) {
      // console.log(info)
      this.$confirm('此操作将解除该课程目标的关联, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const aid = info.aid
        const res = await this.$http.delete('aim_quota/delete', {data: {id: this.qid, ids: [aid]}})
        const {msg, code} = res.data
        if (code === 200) {
          // console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.get(`aim_quota/info/${this.qid}`).then((back) => {
            const {aimQuota} = back.data
            if (back.data.code === 200) {
              this.aimdata = aimQuota
              this.editdata = aimQuota
            } else {
              console.log(msg)
            }
          })
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {})
    },
    // 新增课程目标
    addaims () {
      this.add = true
      this.aimform.push({})
    },
    closeaddaims (index) {
      this.aimform.splice(index, 1)
    },
    // hover 行
    // async hoverRows (row, column, cell, event) {
    //   this.requireId = row.requireId
    //   this.quotaslist = []
    //   const res = await this.$http.get(`require/info/${this.requireId}`)
    //   const {code, msg, info: {quotas}} = res.data
    //   if (code === 200) {
    //     this.quotaslist = quotas
    //   } else {
    //     console.log(msg)
    //   }
    // },
    // 获取目标信息
    async getaimlist () {
      const res = await this.$http.get(`aim/list?pageNum=1&pageSize=9999`)
      // console.log(res)
      const {code, msg, page: {list}} = res.data
      if (code === 200) {
        this.aimlist = list
      } else {
        console.log(msg)
      }
    },
    // // 控制展开行数
    // getRowKeys (row) {
    //   return row.requireId
    // },
    // expand (row, expandedRows) {
    //   this.expands = []
    //   if (expandedRows.length > 0) {
    //     if (row) {
    //       this.expands.push(row.requireId)
    //     } else {
    //       this.expands = []
    //     }
    //   }
    // },
    // 查看指标点页面
    async watch (info) {
      this.InnerData = []
      this.listshow = false
      this.quotasshow = true
      this.labelName = info.content
      this.version = info.version
      this.requireId = info.requireId
      const res = await this.$http.get(`require/info/${this.requireId}`)
      // console.log(res)
      const {code, msg, info: {quotas}} = res.data
      if (code === 200) {
        this.InnerData = quotas
      } else {
        this.$message.error(msg)
      }
    },
    // 返回
    goBack () {
      this.listshow = true
      this.quotasshow = false
    },
    // 分页相关方法
    handleSizeChange (val) {
      this.pageSize = val
      // console.log(`每页 ${val} 条`)
      this.getgradulist()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      // console.log(`当前页: ${val}`)
      this.getgradulist()
    },
    // 添加毕业要求的指标点新增一行
    addnews () {
      this.quotasdata.push({})
      this.addNewsdetails = true
    },
    // 删除新增考核空行
    deleteNew (index) {
      this.quotasdata.splice(index, 1)
    },
    // 获取焦点
    ToFocus (num) {
      if (num === 1) {
        this.$refs.one.focus()
      }
      if (num === 2) {
        this.$refs.two.focus()
      }
      if (num === 3) {
        this.$refs.three.focus()
      }
    },
    // 按下按键时输入框的焦点转变-目标
    jump (el, index) {
      this.inputs = document.getElementsByTagName('input')
      console.log(this.inputs)
      if (index === 2 || index === 4) {
        if (el.keyCode === 13 || el.keyCode === 39 || el.keyCode === 40) {
          this.inputs[index + 1].focus()
          this.inputs[index].blur()
        }
      } else if (index === 3 || index === 5) {
        if (el.keyCode === 37 || el.keyCode === 38) {
          // console.log(this.inputs[index - 1])
          this.inputs[index - 1].focus()
          this.inputs[index].blur()
        }
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.graduation,.card
  height 100%
  min-width: 1200px
  .user-search
    margin-top 15px
    width 100%
    .input-with-select
      width 300px
    .user-btn
      width 130px
      text-align center
  .text
    padding-top 10px
    height 470px
    .demo-table-expand
      font-size 0
    .demo-table-expand label
      width 90px
      color #99a9bf
    .demo-table-expand .el-form-item
      margin-right 0
      margin-bottom 0
      width 50%
.testcolor
  margin-left 10px
  padding-top 5px
  font-size 13px
  color red
.Conpager
  margin 0 auto
  padding-top 5px
  .stu-pager
    text-align center
.InnerTabs
  margin-top 15px
.title
  margin 10px 0 10px 10px
.changetabs
  padding-left 10px
.demo-drawer__content
  padding 0 10px
  height 520px
  overflow auto
.demo-drawer__footer
  text-align right
  margin-right 10px
.addaim
  text-align right
  margin-right 10px
  padding-top 15px
.add-hidden
  padding-top 15px
  height 140px
  overflow auto
  .little
    margin 5px 0
.el-drawer
  overflow scroll
.dialog-footer
  text-align center
</style>
